Bootstrap
Content should be placed within the columns, and only columns may be the
immediate children of rows.
Predefined grid classes like .row and .col-xs-4 are available for quickly making
grid layouts. LESS mixins can also be used for more semantic layouts.
Columns create gutters (gaps between column content) via padding. That
padding is offset in rows for the first and the last column via negative margin on
.rows.
Grid columns are created by specifying the number of twelve available columns
you wish to span. For example, three equal columns would use three .col-xs-4.
7
MediaQueries
Media query is a really fancy term for "conditional CSS rule". It simply applies some
CSS, based on certain conditions set forth. If those conditions are met, the style is
applied.
Media Queries in Bootstrap allow you to move, show and hide content based on the
viewport size. Following media queries are used in LESS files to create the key
breakpoints in the Bootstrap grid system.
/ * Extra small devices (phones, less than 768px) */
/ * No media query since this i s the default in Bootstrap */
/ * Small devices (tablet s, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/ * Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/ * Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
Occasionally these are expanded to include a max-width to limit CSS to a narrower set of
devices.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { . . . }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { . . . }
@media(min-width: @screen-lg-min) { ... }
Media queries have two parts, a device specification and then a size rule. In the above
case, the following rule is set: